<!--
 * @Author: 雷佳斌 leijiabin@yunjinhz.com
 * @Date: 2024-02-18 17:45:44
 * @LastEditors: 雷佳斌 leijiabin@yunjinhz.com
 * @LastEditTime: 2024-02-29 14:29:21
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\internal\statisticsQuery\outflowAnalysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <span>
          <u-icon
            color="#FFF"
            name="more-dot-fill"
            size="38"
            @tap="selectCondit"
          ></u-icon>
        </span>
      </view>
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->

      <view id="chartBox" style="width: 100%; height: 500rpx"></view>

      <view class="list-wrap">
        <view class="title">
          <view>各区域情况表</view>
          <u-line class="u-line" color="#999"></u-line>
        </view>
        <view v-if="list.length" class="list">
          <view
            class="list-item"
            v-for="item of list"
            :key="item.orgUuid"
            @click="handleAreaClick(item)"
          >
            <view class="list-item-content">
              <view class="left">
                <view class="name">{{ item.orgName }}</view>
                <view>
                  <text style="margin-right: 8rpx">案件数</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.caseCountAmount }}
                  </text>
                  <text style="margin-right: 8rpx">案值(万元)</text>
                  <text
                    style="margin-right: 30rpx; font-weight: 600; color: #333"
                  >
                    {{ item.caseValueAmount }}
                  </text>
                  <text style="margin-right: 8rpx">
                    {{ `卷烟数(${queryForm.productUnitName})` }}
                  </text>
                  <text style="font-weight: 600; color: #333">
                    {{ item.cigarCountAmount }}
                  </text>
                </view>
              </view>
              <view class="right">
                <u-icon name="arrow-right"></u-icon>
              </view>
            </view>
            <u-line class="u-line" color="#999"></u-line>
          </view>
        </view>
        <view v-else style="padding: 20rpx 0">
          <u-empty text="数据为空" mode="list"></u-empty>
        </view>
      </view>

      <u-popup v-model="queryShow" width="80%" mode="right">
        <view class="cearch_title"> 查询条件 </view>
        <u-form
          :model="queryForm"
          label-position="top"
          label-width="auto"
          style="padding: 80rpx 32rpx 160rpx 32rpx"
          ref="uForm"
        >
          <u-form-item label="组织机构" right-icon="arrow-right">
            <u-input
              :disabled="true"
              placeholder="请选择"
              v-model="queryForm.orgName"
              :custom-style="pointerStyle"
              @click="choiceOrg"
            >
            </u-input>
          </u-form-item>
          <u-form-item label="日期类型" prop="dateType">
            <dic-input
              :keyWord="$u.dic.DIC_KEYS.I_CASE_DATE_TYPE"
              :dicCode="queryForm.dateType"
              :border="false"
              inputAlign="left"
              type="select"
              :select-open="
                dicSelectOpen('dateType', $u.dic.DIC_KEYS.I_CASE_DATE_TYPE)
              "
              placeholder="请选择"
              v-model="queryForm.dateTypeName"
              @click="
                showDic(
                  $u.dic.DIC_KEYS.I_CASE_DATE_TYPE,
                  queryForm.dateType,
                  'caseCycle'
                )
              "
            />
          </u-form-item>
          <u-form-item label="日期" prop="dateRange">
            <u-input
              v-model="queryForm.rangeDate"
              placeholder="请选择日期区间"
              type="text"
              :disabled="true"
              @click="showDateRange = true"
            ></u-input>
            <u-icon
              :color="$theme.u_type_primary"
              class="i-lay-m"
              name="calendar"
              size="48"
            ></u-icon>
          </u-form-item>
          <u-form-item label="卷烟单位">
            <dic-input
              :keyWord="$u.dic.DIC_KEYS.I_RS_PRODUCT_UINT"
              :dicCode="queryForm.productUnit"
              :border="false"
              inputAlign="left"
              type="select"
              :select-open="
                dicSelectOpen('productUnit', $u.dic.DIC_KEYS.I_RS_PRODUCT_UINT)
              "
              placeholder="请选择"
              v-model="queryForm.productUnitName"
              @click="
                showDic(
                  $u.dic.DIC_KEYS.I_RS_PRODUCT_UINT,
                  queryForm.productUnit,
                  'productUnit'
                )
              "
            />
          </u-form-item>
          <u-form-item label="周期" prop="caseCycle">
            <dic-input
              :keyWord="$u.dic.DIC_KEYS.I_CASE_CYCLE"
              :dicCode="queryForm.caseCycle"
              :border="false"
              inputAlign="left"
              type="select"
              :select-open="
                dicSelectOpen('caseCycle', $u.dic.DIC_KEYS.I_CASE_CYCLE)
              "
              placeholder="请选择"
              v-model="queryForm.caseCycleName"
              @click="
                showDic(
                  $u.dic.DIC_KEYS.I_CASE_CYCLE,
                  queryForm.caseCycle,
                  'caseCycle'
                )
              "
            />
          </u-form-item>
        </u-form>
        <view class="submit-btns btn-other-cls">
          <u-button plain class="u-btn" type="primary" @click="resetBtn">
            重置
          </u-button>
          <u-button class="u-btn" type="primary" @click="confirmBtn">
            确定
          </u-button>
        </view>

        <!-- 下拉选择用 -->
        <dic-choice
          :keyWord="dicKeyWords"
          :currentSelect="dicCurrentSelect"
          v-model="dicShow"
          @confirm="selectDicConfirm"
        ></dic-choice>

        <!-- 时间选择器 -->
        <u-calendar
          max-date="2099-12-31"
          v-model="showDateRange"
          mode="range"
          @change="dateChange"
        ></u-calendar>
      </u-popup>

      <!-- 组织机构选择 -->
      <u-popup mode="bottom" height="80%" v-model="orgSelectShow">
        <org-select
          :cleanParentOrg="true"
          :isHybrid="true"
          limitNodeType="all"
          treeType="zm-comp"
          @choose="handlerChooseOrg"
        ></org-select>
      </u-popup>
    </view>
  </view>
</template>

<script>
import * as echarts from "echarts";
import OrgSelect from "@/components/org-select.vue";
import DicInput from "@/components/dic_input.vue";
import DicChoice from "@/components/dic_choice.vue";
import statisticsService from "@/service/internal/statistics.service";
import util from "@/common/util";

export default {
  components: {
    OrgSelect,
    DicInput,
    DicChoice,
  },
  data() {
    let dateObj = new Date();
    let currYear = dateObj.getFullYear();
    let currMonth =
      dateObj.getMonth() + 1 > 10
        ? dateObj.getMonth() + 1
        : `0${dateObj.getMonth() + 1}`;
    let currDate =
      dateObj.getDate() > 10 ? dateObj.getDate() : `0${dateObj.getDate()}`;
    let dateBegin = `${currYear}-01-01`;
    let dateEnd = `${currYear}-${currMonth}-${currDate}`;

    let user = this.$storage.get(this.$rp.common.USER);
    let orgUuid = user.provOrgUuid;
    let orgName = user.provOrgName;
    let showOrgLevel;
    switch (user.orgLevel) {
      // 省级
      case 1:
        orgUuid = user.provOrgUuid;
        orgName = user.provOrgName;
        showOrgLevel = "02";
        break;
      // 市级
      case 2:
        orgUuid = user.cityOrgUuid;
        orgName = user.cityOrgName;
        showOrgLevel = "03";
        break;
      // 县级
      case 3:
        orgUuid = user.townOrgUuid;
        orgName = user.townOrgName;
        showOrgLevel = "06";
        break;
      default:
        showOrgLevel = "02";
        orgUuid = user.provOrgUuid;
        orgName = user.provOrgName;
        break;
    }
    return {
      lab_style: {
        fontWeight: 500,
        color: this.$theme.u_main_color,
        fontSize: ".75rem",
      },
      iconStyle: {
        color: "#c0c4cc",
      },
      user,
      queryForm: {
        orgUuid, // 组织机构uuid
        orgName, // 组织机构名称
        showOrgLevel, // 展示层级
        rangeDate: `${dateBegin}~${dateEnd}`,
        dateBegin,
        dateEnd,
        dateType: "CASE_DATE",
        dateTypeName: "案发时间",
        productUnit: "02",
        productUnitName: "万支",
        caseCycle: "M",
        caseCycleName: "月",
        showTb: true, // 同比
        showTq: true, // 环比
      },
      showDateRange: false,
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
      pointerStyle: {
        marginRight: "5px",
        pointerEvents: "none !important",
      },
      // h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx end
      dicKeyWords: "",
      dicCurrentSelect: "",
      dicShow: false,
      dicType: "",
      queryShow: false,
      orgSelectShow: false,
      list: [],
    };
  },
  // 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
  mounted() {
    this.loadData(this.queryForm);
  },
  methods: {
    dicSelectOpen(type, keyWords) {
      if (type == this.dicType) {
        if (this.dicKeyWords == keyWords && this.dicShow) {
          return true;
        }
        return false;
      }
    },
    showDic(key, cur, type) {
      if (this.dicShow) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
      this.dicType = type;
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.I_CASE_CYCLE) {
        // 周期
        this.queryForm.caseCycleName = e[0].label;
        this.queryForm.caseCycle = e[0].extra.bcbCode;
      } else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.I_RS_PRODUCT_UINT) {
        // 卷烟单位
        this.queryForm.productUnitName = e[0].label;
        this.queryForm.productUnit = e[0].extra.bcbCode;
      } else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.I_CASE_DATE_TYPE) {
        // 日期类型

        this.queryForm.dateTypeName = e[0].label;
        this.queryForm.dateType = e[0].extra.bcbCode;
      }
    },
    dateChange(e) {
      this.queryForm.dateBegin = e.startDate;
      this.queryForm.dateEnd = e.endDate;
      this.queryForm.rangeDate = `${e.startDate}~${e.endDate}`;
    },
    confirmBtn() {
      this.loadData(this.queryForm);
    },
    resetBtn() {
      this.queryForm = {};
    },
    choiceOrg() {
      this.orgSelectShow = true;
    },
    selectCondit() {
      this.queryShow = true;
    },
    handlerChooseOrg(orgs) {
      this.queryForm.orgUuid = orgs[0].id;
      this.queryForm.orgName = orgs[0].name;

      switch (orgs[0].nodeType) {
        case "01":
          // 省级
          this.queryForm.showOrgLevel = "02"; // 市局展示
          break;
        case "02":
          // 市级
          this.queryForm.showOrgLevel = "03"; // 县局展示
          break;
        case "03":
          // 县级
          this.queryForm.showOrgLevel = "06"; // 队所展示
          break;
        default:
          break;
      }

      this.orgSelectShow = false;
    },
    loadData(data) {
      this.queryShow = false;
      this.$u.loading("数据查询中...");
      statisticsService
        .caseCycle({
          paras: {
            ...data,
          },
        })
        .then((res) => {
          this.$u.hideLoading();
          this.initChart(res.bean);

          this.list = res.data.map((item) => {
            let cigarCountAmount = 0, // 卷烟数量
              caseCountAmount = 0, // 案件数量
              caseValueAmount = 0; // 案值
            res.bean.map((beanItem) => {
              let cycleCigarCountAmount =
                item[beanItem.cycleCode + "CigaCount"] || 0;
              let cycleCaseValueAmount =
                item[beanItem.cycleCode + "CaseValueCount"] || 0;
              let cycleCaseCountAmount =
                item[beanItem.cycleCode + "CaseCount"] || 0;
              cigarCountAmount = util.accAdd(
                cigarCountAmount,
                cycleCigarCountAmount
              );
              caseValueAmount = util.accAdd(
                caseValueAmount,
                cycleCaseValueAmount
              );
              caseCountAmount = util.accAdd(
                caseCountAmount,
                cycleCaseCountAmount
              );
            });
            item.cigarCountAmount = cigarCountAmount;
            item.caseCountAmount = caseCountAmount;
            item.caseValueAmount = caseValueAmount / 10000;

            return item;
          });
        })
        .catch(() => {
          this.$u.hideLoading();
        });
    },
    handleAreaClick(data) {
      let url = "/pages/internal/statisticsQuery/caseTrendsAnalysisByArea";
      let paramArr = ["currOrgUuid=" + data.orgUuid];
      Object.keys(this.queryForm).map((key) => {
        let keyVal = this.queryForm[key];
        paramArr.push(`${key}=${keyVal}`);
      });
      url += "?" + paramArr.join("&");

      uni.navigateTo({ url });
    },
    initChart(data) {
      let xData = [],
        caseCountArr = [],
        caseValueArr = [],
        cigarCountArr = [];

      data.forEach((item) => {
        xData.push(item.cycleName);
        caseCountArr.push(item.caseCount || 0);
        caseValueArr.push(item.caseValueCount / 10000);
        cigarCountArr.push(item.cigaCount || 0);
      });

      let chart = echarts.init(document.getElementById("chartBox"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "案件数",
            "案值(万元)",
            `卷烟数(${this.queryForm.productUnitName})`,
          ],
        },
        grid: {
          left: "2%",
          right: "3%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            name: "案件数/案值",
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: `卷烟数(${this.queryForm.productUnitName})`,
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "案件数",
            type: "line",
            data: caseCountArr,
          },
          {
            name: "案值(万元)",
            type: "line",
            data: caseValueArr,
          },
          {
            name: `卷烟数(${this.queryForm.productUnitName})`,
            type: "line",
            data: cigarCountArr,
            yAxisIndex: 1,
          },
        ],
      };

      chart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}

.head-img {
  width: 100%;
  padding: 16rpx 16rpx;
  margin: 0 auto;
}
.grid-lay {
  padding: 0 32rpx;
}
.grid-text {
  color: $u-main-color;
  margin-top: 24rpx;
  font-size: 30rpx;
}

.list-wrap {
  margin-top: 10rpx;
  .title {
    font-size: 32rpx;
    color: #999;
    line-height: 80rpx;
    // border-bottom: 1rpx solid #999;
  }
}

.list {
  &-item {
    &-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      color: #999;
      .left {
        .name {
          font-size: 32rpx;
          font-weight: 600;
          margin-bottom: 10rpx;
          color: #333;
        }
      }
      .right {
        .count {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }
  }
}
</style>
